<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
    <title>第五周通关作业</title>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <hgroup>
          <h1>我是主标题</h1>
          <h2>我是副标题</h2>
        </hgroup>
        <p>我是主标题我是副标题我是主标题我是副标题我是主标题我是副标题我是主标题我是副标题我是主标题我是副标题我是主标题我是副标题我是主标题我
          是副标题我是主标题我是副标题我是主标题我是副标题我是主标题我是副标题我是主标题我是副标题我是主标题我是副标题
        </p>
      </div>
      <div id="mainmenu"><span>主菜单</span></div>
      <nav>

        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">产品
            <ul>
              <li><a href="#">书籍
                <ul>
                  <li><a href="#">JAVA</a></li>
                  <li><a href="#">HTML</a></li>
                  <li><a href="#">NODE JS</a></li>
                  <li><a href="#">JAVASCRIPT</a></li>
                </ul>
              </a></li>
              <li><a href="#">电子产品
                <ul>
                  <li><a href="#">手机</a></li>
                  <li><a href="#">MP4</a></li>
                  <li><a href="#">音箱</a></li>
                  <li><a href="#">数码相机</a></li>
                  <li><a href="#">数码相机</a></li>
                </ul>
              </a></li>
              <li><a href="#">小吃</a></li>
              <li><a href="#">饮品</a></li>
            </ul>
          </a></li>
          <li><a href="#">项目</a></li>
          <li><a href="#">关于我们</a></li>
        </ul>
      </nav>
      <div class="main">
        <section class="products">
          <h1>产品展示</h1>
          <div class="product">
            <h4>商品名称</h4>
            <img src="product.jpg" alt="">
            <p>商品描述</p>
          </div></section>
      </div>
    </div>

    <script type="text/javascript">
      /*增加商品*/
      const pdom = document.querySelector(".product");
      const psdom = document.querySelector(".products");
      for(let i=0; i<9;i++){
        psdom.insertAdjacentHTML("beforeEnd",pdom.outerHTML);
      }
      /*打开关闭菜单*/
      const menubut = document.querySelector("#mainmenu");
      const mainnav = document.querySelector("nav ul");
      menubut.addEventListener("click",function(event){
        if(mainnav.style.display == "none" || mainnav.style.display == ""){
          mainnav.style.display = "inline-block";
        }else{
          mainnav.style.display = "none";
        }
      });

      /*当点击LI或A标签时，打开或关闭其下的UL子菜单，可实现无限级下拉菜单 */
      mainnav.addEventListener("click",function(event){
        let tName = event.target.tagName;
        if(tName == "A" || tName == "LI" ){
          let ul = event.target.querySelector("ul");
          if(ul.style.display == "none" || ul.style.display ==""){
            ul.style.display = "inline-block";
          }else{
            ul.style.display = "none";
          }
        }
      });
    </script>
  </body>
</html>
